<template>
  <v-app light>
    <v-navigation-drawer
      :clipped="$vuetify.breakpoint.lgAndUp"
      v-model="drawer"
      fixed
      app>
      <v-list dense>
        <template v-for="item in navList">
          <v-list-group
            v-if="item.children"
            v-model="item.model"
            :key="item.text"
            :prepend-icon="item.model ? item.icon : item[iconAlt]"
            append-icon="">
            <v-list-tile slot="activator">
              <v-list-tile-content>
                <v-list-tile-title v-text="item.text"></v-list-tile-title>
              </v-list-tile-content>
            </v-list-tile>
            <v-list-tile
              v-for="(child, i) in item.children"
              :key="i"
              @click="">
              <v-list-tile-action v-if="child.icon">
                <v-icon v-text="child.icon"></v-icon>
              </v-list-tile-action>
              <v-list-tile-content>
                <v-list-tile-title v-text="child.text"></v-list-tile-title>
              </v-list-tile-content>
            </v-list-tile>
          </v-list-group>
          <v-list-tile v-else :key="item.text" @click="">
            <v-list-tile-action>
              <v-icon v-text="item.icon"></v-icon>
            </v-list-tile-action>
            <v-list-tile-content>
              <v-list-tile-title v-text="item.text"></v-list-tile-title>
            </v-list-tile-content>
          </v-list-tile>
        </template>
      </v-list>
    </v-navigation-drawer>

    <!--header toolbar-->
    <v-toolbar
      :clipped-left="$vuetify.breakpoint.lgAndUp"
      color="blue darken-3"
      dark
      app
      fixed>
      <v-toolbar-side-icon @click.stop="drawer = !drawer"></v-toolbar-side-icon>
      <v-toolbar-title style="width: 300px" class="ml-0 pl-3 hidden-sm-and-down"
                       v-text="toolbarTitle"></v-toolbar-title>
      <v-spacer></v-spacer>
      <v-toolbar-items class="hidden-xs-only">
        <v-btn v-for="(item,i) in boolbarItems"
               :key="i" flat
               :to="{path:item.path}">
          <v-icon v-text="item.icon"></v-icon>
          <span v-text="item.text"></span>
        </v-btn>
      </v-toolbar-items>
      <v-btn icon large>
        <v-avatar size="32px" tile>
          <img :src="logo" alt="Logo">
        </v-avatar>
      </v-btn>
    </v-toolbar>

    <v-content>
      <router-view></router-view>
    </v-content>

    <!--footer info-->
    <v-footer class="blue darken-2" app>
      <v-layout row wrap align-center>
        <v-flex xs12>
          <div class="white--text ml-3 footer-info">
            <v-icon class="red--text">favorite</v-icon>
            <span v-html="footerInfo"></span>
          </div>
        </v-flex>
      </v-layout>
    </v-footer>
  </v-app>
</template>

<script lang="ts">
  import {Vue, Component} from 'vue-property-decorator'

  @Component
  export default class App extends Vue {

    drawer: boolean = false;
    navList: any[] = [
      {icon: 'chat_bubble', text: 'Send feedback'},
      {icon: 'contacts', text: 'Contacts'},
      {icon: 'settings', text: 'Settings'},
      {icon: 'help', text: 'Help'}
    ];
    toolbarTitle: string = 'Linfulong Page';
    boolbarItems: { [p: string]: string }[] = [
      {
        icon: "home",
        text: "Home",
        path: "/"
      },
      {
        icon: "contacts",
        text: "About",
        path: "/about"
      },
      {
        icon: "chat",
        text: "Login",
        path: "/login"
      }
    ];

    logo: string = require("@/assets/logo.png");

    get footerInfo() {
      return `本网站模板由
              <a class="white--text" href="https://vuetifyjs.com" target="_blank">Vuetify</a>
              提供 &ensp;&ensp;&ensp;
              <em> --- Linfulong</em>`
    }
  }
</script>

<style lang="scss">
  .footer-info {
    text-align: right;
    padding: 0 16px;
  }
</style>
